<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
 	.dialog-content>.body {
    	max-height: 650px;
	}
	.dialog-title {
	    font-size: 17px;
	    width: 100%;
	    text-align: center;
	    margin-top: 2px;
	    font-weight: 600;
	    line-height: 24px;
	    letter-spacing: 1px;
	}
	.detail-content {
	    display: -webkit-box;
	    display: flex;
	    margin-top: 20px;
	}
	.detail-content .qrCode {
	    display: -webkit-box; 
	    display: flex;
	    -webkit-box-pack: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    align-items: center;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    flex-direction: column;
	    width: 152px;
	}
	img {
	    vertical-align: middle;
	    border-style: none;
	}
	.qrCode h4 {
	    text-align: center;
	    margin-top: 16px;
	}
	.detail-content .qrCode .btn-wrap {
	    margin-top: 16px;
	}
	.confirm-btn {
	    width: 152px;
	    background: #1890ff;
	    border-radius: 4px;
	    color: #fff;
	    border-color: transparent;
	}
	area, button, input:not([type=range]), label, select, summary, textarea {
	    -ms-touch-action: manipulation;
	    touch-action: manipulation;
	}
	a {
	    color: #1890ff;
	    text-decoration: none;
	    background-color: transparent;
	    outline: none;
	    cursor: pointer;
	    -webkit-transition: color .3s;
	    transition: color .3s;
	    -webkit-text-decoration-skip: objects;
	}
	.line {
	    width: 1px;
	    background-color: #e8e8e8;
	    margin: 0 32px;
	}
	.desc {
	    color: #000;
	    -webkit-box-flex: 1;
	    flex: 1;
	    overflow-y: auto;
	    max-height: 280px;
	}
	.title {
	    font-size: 14px;
	    font-weight: 600;
	    color: rgba(0,0,0,.85);
	    line-height: 20px;
	    margin-bottom: 16px;
	}
	.rect {
	    width: 3px;
	    height: 12px;
	    background: #1990ff;
	    margin-right: 4px;
	    display: inline-block;
	}
	.item {
    	margin-bottom: 16px;
	}
	.name {
	    width: 100px;
	    display: inline-block;
	    text-align: right;
	    color: rgba(0,0,0,.45);
	}
	.chat-list-dialog {
	    margin-left: 100px;
	    margin-top: 16px;
	}
	li, ul {
	    padding: 0;
	    list-style: none;
	    -webkit-padding-start: 0;
	    padding-inline-start: 0;
	    -webkit-margin-before: 0;
	    margin-block-start: 0;
	    -webkit-margin-start: 0;
	    margin-inline-start: 0;
	}
	.chat-info {
	    width: 160px;
	    height: 38px;
	    padding: 12px 13px;
	    background: #fff;
	    border: 1px solid #e6e6e6;
	    box-sizing: border-box;
	    border-radius: 2px;
	    display: -webkit-box;
	    display: flex;
	    -webkit-box-align: center;
	    align-items: center;
	}
	.chat-li {
	    margin-bottom: 8px;
	    display: -webkit-box;
	    display: flex;
	    -webkit-box-align: center;
	    align-items: center;
	    box-sizing: border-box;
	}
	.chat-info>img {
	    width: 30px;
	    height: 30px;
	    margin-right: 7px;
	}
	*, :after, :before {
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	}
	.chat-status {
	    width: 58px;
	    height: 22px;
	    font-size: 12px;
	    line-height: 22px;
	    color: rgba(0,0,0,.65);
	    text-align: center;
	    border-radius: 2px;
	    margin-left: 16px;
	    word-break: keep-all;
	    white-space: nowrap;
	}
	.chat-status.red {
	    background: #fbe3e2;
	    border: 1px solid #ffb4b4;
	}
	.chat-status.green {
	    background: #e8fcdc;
	    border: 1px solid #a1ec9f;
	}
	.chat-status.gray {
	    background: #f2f2f2;
	    border: 1px solid #d1d1d1;
	}
</style>
	<title>分享</title>
</head>
<body>
<div class="body ant-modal-body" style="">
	<h2 class="dialog-title">分享</h2>
	<div class="detail-content">
		<div class="qrCode">
			<h4>方式1：二维码</h4>
			<img src="{$qr_code}" style="width: 133px;border: 1px solid #DCDFE6;">
			
			<div class="btn-wrap">
				<a class="table-public-btn" target="_blank" href="download_qrcode-{$id}.html"><button class="layui-btn">下载二维码</button></a>
			</div>
		</div>
		<div class="line"></div>
		<div class="desc">
			<h4>方式2：邀请链接</h4>
			<div class="btn-wrap">
				<span>{$url}</span>
			</div>
			<div class="btn-wrap">
				<button class="layui-btn" onclick="copyToClip('{$url}')">复制链接</button>
			</div>
		</div>
	</div>
</div>
<script src="/cdn/jquery.js"></script>
<script src="/cusmanage/js/layui.all.js"></script>
<script type="text/javascript">
	function copyToClip(content, message) {
		var aux = document.createElement("input"); 
		aux.setAttribute("value", content); 
		document.body.appendChild(aux); 
		aux.select();
		document.execCommand("copy"); 
		document.body.removeChild(aux);
		if (message == null) {
			layer.msg("复制成功");
		} else{
			layer.msg(message);
		}
	}
</script>
</body>
</html>